<template>
  <div>
    <v-card>
      <v-card-title>
        关系网络
      </v-card-title>
      <v-divider/>
      <network v-if="nodes.length > 0" style="height: 500px; width: 100%" :nodeList="nodes" :linkList="links"></network>
      <v-card-text v-show="nodes.length === 0"><h3 class="text-center mt-3">No Data Available.</h3></v-card-text>
    </v-card>

    <v-card
        min-height="300px"
        class="mt-6"
    >
      <v-card-title>
        论文<v-spacer></v-spacer>
        <v-btn
            @click="Sort('year')"
            text
            color="primary"
        >
          按年份排序
        </v-btn>
        <v-btn
            @click="Sort('n_citation')"
            text
            color="primary"
        >
          按引用量排序
        </v-btn>
      </v-card-title>
      <v-divider/>
<!--      <h3 class="text-center mt-12">No Data Available.</h3>-->
      <v-card-text v-show="tempPapers.length === 0"><h3 class="text-center mt-12">No Data Available.</h3></v-card-text>
      <div v-for="(paper, index) in this.tempPapers" :key="index">
        <PaperCard :paper="paper" v-if="index < 10"></PaperCard>
      </div>
    </v-card>
  </div>
</template>

<script>
import Network from "../force-directed/Network";
import PaperCard from "../../components/PaperCard";
export default {
  name: "ProfileAchievement",
  components: {Network, PaperCard},
  props: ['nodes', 'links', 'papers', 'id'],
  data(){
    return {
      tempPapers: JSON.parse(JSON.stringify(this.papers))
    }
  },
  methods: {
    Sort(text){
      const that = this;
      this.$api.getScholar.sort(this.id, text)
        .then(function (response){
          // console.log(response)
          that.tempPapers = response;
        })
        .catch(function (){
          that.$notify.error({
            title: '出错啦',
            message: '寄'
          })
        })
    }
  }
}
</script>

<style scoped>

</style>